<template>
	<div class="menu-row" v-for="(nodeItem, index) in props.menuList" :key="'node' + index">
		<zh-card :title="nodeItem.meta.title" mode="default">
			<template #header>
				<div style="display: flex; justify-content: start; align-items: center">
					<SvgIcon :name="nodeItem.meta.icon" :size="26" :style="{ color: nodeItem.meta.color || 'var(--el-color-primary-light-2)' }" />
					<span class="personal-edit-title" :style="{ color: nodeItem.meta.color || 'var(--el-color-primary)' }">{{ nodeItem.meta.title }}</span>
				</div>
			</template>
			
			<div class="menu-row" v-for="(nodeChildItem, index) in getNodList(nodeItem.children)" :key="'nodeChild' + index">
				<zh-card :title="nodeChildItem.meta.title" mode="default" >
					<template #header>
						<div style="display: flex; justify-content: start; align-items: center">
							<SvgIcon :name="nodeChildItem.meta.icon" :size="20" :style="{ color: nodeChildItem.meta.color || 'var(--el-color-primary-light-2)' }" />
							<span class="node-title" :style="{ color: nodeChildItem.meta.color || 'var(--el-color-primary)' }">{{ nodeChildItem.meta.title }}</span>
						</div>
					</template>
					<LeafChildItem :menuList="getLeafList(nodeChildItem.children)" />
				</zh-card>
			</div>
			<LeafItem :menuList="getLeafList(nodeItem.children)" />
		</zh-card>
	</div>
</template>
<script lang="ts" setup name="commonMemuPage">
import LeafItem from './leafItem.vue';
import LeafChildItem from './leafChildItem.vue';
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	menuList: {
		type: Array,
		default: () => [],
	},
});
const getLeafList = (list: any) => {
	if(!list||list.length<=0){
		return []
	}
	return list.filter((item: any) => item.meta?.type !== '0');
};
const getNodList = (list: any) => {
	if(!list||list.length<=0){
		return []
	}
	return list.filter((item: any) => item.meta?.type === '0');
};
</script>
<style scoped lang="scss">
.menu-row {
	margin-bottom: 20px;
}
.menu-row:last-child {
	margin-bottom: 0;
}
.personal-edit-title {
	padding-left: 10px;
	font-size: 24px;
	font-weight: 600;
}
.node-title {
	padding-left: 10px;
	font-size: 16px;
	font-weight: 600;
}
</style>
